<html>
<head>
    <style>
        th,
        td {
            padding: 5px;
            text-align: left;
        }

        h2 {
            padding: 20px;
        }

        td div {
            padding-top: 5px;
            padding-left: 10px;
        }

        .content {
            background-color: #ffffff;
            justify-content: center;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .state-success-bk {
            background-color: #4caf50 !important;
        }

        .state-failure-bk {
            background-color: #FFCDD2 !important;
        }

        .state-cancelled-bk {
            background-color: #9e9e9e !important;
        }

        .state-timeout-bk {
            background-color: #ff9800 !important;
        }
    </style>
</head>

<body>
<div class="content">
    #if( $FLOWCI_JOB_STATUS == 'SUCCESS' )
    <h2 class="state-success-bk">flow.ci report: $FLOWCI_FLOW_NAME $FLOWCI_JOB_BUILD_NUM</h2>
    #elseif( $FLOWCI_JOB_STATUS == 'FAILURE')
    <h2 class="state-failure-bk">flow.ci report: $FLOWCI_FLOW_NAME $FLOWCI_JOB_BUILD_NUM</h2>
    #elseif( $FLOWCI_JOB_STATUS == 'CANCELLED')
    <h2 class="state-cancelled-bk">flow.ci report: $FLOWCI_FLOW_NAME $FLOWCI_JOB_BUILD_NUM</h2>
    #elseif( $FLOWCI_JOB_STATUS == 'TIMEOUT')
    <h2 class="state-timeout-bk">flow.ci report: $FLOWCI_FLOW_NAME $FLOWCI_JOB_BUILD_NUM</h2>
    #end

    <table>
        <tbody>
        <tr>
            <td>State:</td>
            <td>$FLOWCI_JOB_STATUS</td>
        </tr>
        <tr>
            <td>Trigger:</td>
            <td>$FLOWCI_JOB_TRIGGER</td>
        </tr>
        <tr>
            <td>Triggered By:</td>
            <td>$FLOWCI_JOB_TRIGGER_BY</td>
        </tr>
        <tr>
            <td>Start At:</td>
            <td>$FLOWCI_JOB_START_AT</td>
        </tr>
        <tr>
            <td>Finish At:</td>
            <td>$FLOWCI_JOB_FINISH_AT</td>
        </tr>
        <tr>
            <td>Duration:</td>
            <td>$FLOWCI_JOB_DURATION (s)</td>
        </tr>

        <!-- Git Commit Info -->
        #if ( $FLOWCI_JOB_TRIGGER == 'PUSH' || $$FLOWCI_JOB_TRIGGER == 'TAG' )
        <tr>
            <td colspan="2">
                <h5>Git Info:</h5>
                <div>
                    Branch: $FLOWCI_GIT_BRANCH
                </div>
                <div>
                    Commit ID:
                    <a href="$FLOWCI_GIT_COMMIT_URL" target="_blank">$FLOWCI_GIT_COMMIT_ID</a>
                </div>
                <div>
                    Commit Message: $FLOWCI_GIT_COMMIT_MESSAGE
                </div>
            </td>
        </tr>
        #end

        <!-- Git PR Info -->
        #if ( $FLOWCI_JOB_TRIGGER == 'PR_OPENED' || $$FLOWCI_JOB_TRIGGER == 'PR_MERGED' )
        <tr>
            <td colspan="2">
                <h5>Git Info:</h5>
                <div>
                    Title:
                    <a href="$FLOWCI_GIT_PR_URL" target="_blank">$FLOWCI_GIT_PR_TITLE</a>
                </div>
                <div>
                    Message: $FLOWCI_GIT_PR_MESSAGE
                </div>
                <div>
                    Number: $FLOWCI_GIT_PR_NUMBER
                </div>
                <div>
                    Head Repo: $FLOWCI_GIT_PR_HEAD_REPO_NAME, $FLOWCI_GIT_PR_HEAD_REPO_BRANCH
                </div>
                <div>
                    Base Repo: $FLOWCI_GIT_PR_BASE_REPO_NAME, $FLOWCI_GIT_PR_BASE_REPO_BRANCH
                </div>
            </td>
        </tr>
        #end

        <!-- Steps -->
        <tr>
            <td colspan="2">
                <h5>Steps:</h5>
                #foreach( $item in $$FLOWCI_JOB_STEPS.split(";") )
                <div>
                    #set ( $stepInfo = $item.split("=") )
                    $stepInfo[0] : $stepInfo[1]
                </div>
                #end
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>